import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  state = {
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 18,
      sex: '男',
    },
  }
  changeCount = () => {
    /* this.state.count++
    // 不要上面的写法，即便通过下面的操作也能做到更新视图
    this.setState({
      count: this.state.count,
    }) */
    this.setState({
      count: this.state.count + 1,
    })
  }
  changeList = () => {
    /* this.state.list.push('Hello React')
    this.setState({
      list: this.state.list,
    }) */
    this.setState({
      list: [...this.state.list, 'Hello React'],
    })
  }
  changePerson = () => {
    /* this.state.person.name = 'ifer'
    this.state.person.age = 19
    this.setState({
      person: this.state.person,
    }) */
    this.setState({
      person: {
        ...this.state.person,
        name: 'ifer',
        age: 19,
      },
    })
  }
  render() {
    return (
      <div>
        <h3>count</h3>
        <p>{this.state.count}</p>
        <button onClick={this.changeCount}>click</button>
        <hr />
        <h3>list</h3>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.changeList}>click</button>
        <hr />
        <h3>person</h3>
        <p>
          {this.state.person.name} {this.state.person.age}
        </p>
        <button onClick={this.changePerson}>click</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#root'))
